<template>
  <view class="member">
    <view class="main">
      <view class="top_box">
        <shopro-navbar :isBack="true">
          <view slot="content"> <view class="title">爱特玩会员</view></view>
        </shopro-navbar>
      </view>
      <view class="contain">
        <swiper
          interval="3000"
          duration="500"
          class="top-swiper"
          @animationfinish="onAnimationfinish"
          previous-margin="34rpx"
          next-margin="60rpx"
        >
          <swiper-item
            class="swiper"
            v-for="(item, index) in cardList"
            :key="index"
            :class="current == index ? 'scale' : ''"
          >
            <view class="card_box">
              <img :src="$IMG_URL + item.url" alt="" mode="widthFix" />
              <view class="message_box">
                <view
                  class="top_line"
                  @click="onClickHandle($event, 'toMemberDetail')"
                >
                  <view class="title"
                    >还需<text>100</text>积分升级至<text>V1</text></view
                  >
                  <u-icon name="arrow-right" color="#fff" size="16"></u-icon>
                </view>
                <view class="progress">
                  <u-line-progress
                    active-color="#fff"
                    inactive-color="rgba(255,255,255,0.25)"
                    height="13"
                    :percent="70"
                  ></u-line-progress>
                  <view class="number">
                    <view class="start">0</view>
                    <view class="end">100</view>
                  </view>
                </view>
              </view>
              <view class="card_box_btn" v-if="index == 0">立即消费</view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="task">
      <view class="title">VIP今日任务</view>
      <view class="task_box">
        <view class="first_line">
          <view class="photo">
            <img src="./images/r1.png" alt="" />
          </view>
          <view class="center">
            <view class="top_text">每日登录</view>
            <view class="bottom_text">VIP积分<text>+50</text></view>
          </view>
          <view class="receive_btn">领取</view>
        </view>
        <view class="first_line">
          <view class="photo">
            <img src="./images/r2.png" alt="" />
          </view>
          <view class="center">
            <view class="top_text">邀请新用户</view>
            <view class="bottom_text">VIP积分<text>+50</text></view>
          </view>
          <view class="complete_btn">去完成</view>
        </view>
        <view class="first_line" style="border: none">
          <view class="photo">
            <img src="./images/r3.png" alt="" />
          </view>
          <view class="center">
            <view class="top_text">今日消费20元</view>
            <view class="bottom_text">VIP积分<text>+50</text></view>
          </view>
          <view class="hadReceive_btn">已领取</view>
        </view>
      </view>
    </view>
    <view class="coupon">
      <view class="title">VIP专属优惠券</view>
      <view class="bottom_box">
        <view
          class="coupon_box"
          v-for="(item, index) in couponList"
          :key="index"
        >
          <view class="img_box">
            <img
              :src="
                $IMG_URL +
                '/uploads/20230531/fbca77ba7b3720afa9f22da5d42897ab.png'
              "
              alt=""
              mode="widthFix"
            />
            <view class="rules">满100元减10元</view>
            <view class="price">10</view>
            <view class="explain">已自动发放</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(50);
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  data() {
    return {
      cardList: [
        { url: '/uploads/20230531/45e9060f867b8259a29a50cfc73c3a96.png' },
        { url: '/uploads/20230531/0c326104895994a1e7edbb3e0367abf6.png' },
        { url: '/uploads/20230531/f7d20c34076960b3d091dd90416ba38a.png' },
        { url: '/uploads/20230531/2882995676dddc0667fd8fd1d2dbe118.png' },
      ],
      current: 0,
      couponList: [{}, {}, {}],
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {},
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  methods: {
    // 轮播图 滚动结束
    onAnimationfinish(e) {
      this.current = e.detail.current;
    },
    onClickHandle(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // 跳转会员明细页
          case 'toMemberDetail':
            uni.navigateTo({
              url: 'pages/app/member/member_detail',
            });
            break;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.member {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .main {
    width: 100%;
    height: 670rpx;
    background: url($IMG_URL + '/uploads/20230531/368088a95d392d21ca9705085730f2e4.png')
      no-repeat left top;
    background-size: contain;
    .top_box {
      width: 100%;
      /deep/ .cu-custom .cu-bar {
        background: none !important;
      }
      /deep/ .u-iconfont {
        color: #fff !important;
        font-size: 30rpx !important;
      }
      /deep/ .content {
        justify-content: center;
      }
      .title {
        font-size: 36rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
    .contain {
      margin-top: 50rpx;
      width: 100%;
      .top-swiper {
        width: 100%;
        height: 400rpx;
        .swiper {
          // margin: 0 30rpx !important
          margin-bottom: 10rpx;
          bottom: 0;
          left: 0;
          height: auto !important;

          &.scale {
            // opacity: 0.6;
            // transform: scaleX(0.96) scaleY(0.92);
            // transform: translateY(100rpx);
            bottom: 50rpx;
          }

          .card_box {
            width: 690rpx;
            padding: 0 38rpx;
            position: relative;

            img {
              width: 100%;
            }
            .message_box {
              position: absolute;
              bottom: 32rpx;
              left: 100rpx;
              width: 290rpx;
              .top_line {
                display: flex;
                .title {
                  font-size: 20rpx;
                  font-family: PingFang SC-Medium, PingFang SC;
                  font-weight: 400;
                  color: #ffffff;
                  text {
                    font-weight: 700;
                  }
                }
              }
              .progress {
                /deep/ .u-progress {
                  display: block !important;
                  margin-top: 12rpx;
                  margin-bottom: 8rpx;
                }
                .number {
                  display: flex;
                  justify-content: space-between;
                  .start {
                    font-size: 18rpx;
                    font-family: DIN-Medium, DIN;
                    font-weight: 500;
                    color: #ffffff;
                    margin-left: -10rpx;
                  }
                  .end {
                    font-size: 18rpx;
                    font-family: DIN-Medium, DIN;
                    font-weight: 500;
                    color: #ffffff;
                    margin-right: -10rpx;
                  }
                }
              }
            }
            .card_box_btn {
              width: 146rpx;
              height: 48rpx;
              background: #7459c1;
              box-shadow: inset -82rpx 0rpx 44rpx 0rpx #987be8;
              border-radius: 85rpx 85rpx 85rpx 85rpx;
              font-size: 24rpx;
              font-family: PingFang SC-Bold, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              text-align: center;
              line-height: 48rpx;
              position: absolute;
              top: 69rpx;
              right: 82rpx;
            }
          }
        }
      }
    }
  }
  .task {
    width: 100%;
    padding: 30rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    margin-top: -20rpx;
    background-color: #fff;
    .title {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 700;
      color: #3d3d3d;
    }
    .task_box {
      width: 690rpx;
      height: 420rpx;
      background: #f5f5f5;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      opacity: 1;
      border: 1rpx solid #dedede;
      margin-top: 24rpx;
      padding: 0 25rpx;
      .first_line {
        width: 100%;
        height: 140rpx;
        border-bottom: 1rpx solid #d8d8d8;
        display: flex;
        align-items: center;
        .photo {
          width: 80rpx;
          height: 80rpx;
          background: #d7c9ff;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          margin-left: 44rpx;
          margin-right: 24rpx;
          img {
            width: 42rpx;
            height: 44rpx;
          }
        }
        .center {
          height: 80rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 20rpx;
          width: 310rpx;
          .top_text {
            font-size: 30rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #3d3d3d;
          }
          .bottom_text {
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #979797;
            text {
              color: #7c5cd8;
              margin-left: 10rpx;
            }
          }
        }
        .receive_btn {
          width: 140rpx;
          height: 60rpx;
          background: #a084f0;
          border-radius: 168rpx 168rpx 168rpx 168rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          line-height: 60rpx;
        }
        .complete_btn {
          width: 140rpx;
          height: 60rpx;
          border-radius: 168rpx 168rpx 168rpx 168rpx;
          opacity: 1;
          border: 2rpx solid #a084f0;
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #a084f0;
          text-align: center;
          line-height: 60rpx;
        }
        .hadReceive_btn {
          width: 140rpx;
          height: 60rpx;
          background: #e8e8e8;
          border-radius: 168rpx 168rpx 168rpx 168rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: 400;
          color: #979797;
          text-align: center;
          line-height: 60rpx;
        }
      }
    }
  }
  .coupon {
    width: 100%;
    .title {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 700;
      color: #3d3d3d;
      margin-bottom: 24rpx;
      margin-left: 30rpx;
    }
    .bottom_box {
      display: flex;
      .coupon_box {
        width: 210rpx;
        margin-left: 30rpx;
        .img_box {
          width: 100%;
          position: relative;
          img {
            width: 100%;
          }
          .rules {
            position: absolute;
            top: 8rpx;
            left: 28rpx;
            font-size: 22rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #de3249;
          }
          .price {
            position: absolute;
            top: 46rpx;
            right: 52rpx;
            font-size: 64rpx;
            font-family: Source Han Sans CN-Normal, Source Han Sans CN;
            font-weight: 700;
            color: #de3249;
            &::before {
              content: '￥';
              font-size: 58rpx;
              font-family: Source Han Sans CN-Normal, Source Han Sans CN;
              font-weight: 350;
              color: #de3249;
              margin-right: -16rpx;
            }
          }
          .explain {
            position: absolute;
            left: 50rpx;
            bottom: 33rpx;
            font-size: 22rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #de3249;
          }
        }
      }
    }
  }
}
</style>
